<template>
  <vue3ScrollSeamless :dataList="listData" class="warp"  :classOptions="classOption">
    <ul class="item">
      <li v-for="(item, index) in listData" :key="index">
        <div class="liItem">
          <span v-text="item.date"></span>
          <span class="gapStyle" v-text="' 客户'+item.onwer"></span>
          <span class="gapStyle">的</span>
          <span class="gapStyle" v-text=" '设备'+item.code"></span>
          <span class="gapStyle" v-text="item.msg"></span>
        </div>

      </li>
    </ul>
  </vue3ScrollSeamless>
</template>
<script>
import {vue3ScrollSeamless} from "vue3-scroll-seamless";
//https://chenxuan0000.github.io/vue-seamless-scroll/zh/guide/01-basic.html
import {getEquipDynamic} from '/@/api/visualizing/master'
import lodash from 'lodash'
export default {
  components: {
    vue3ScrollSeamless
  },
  data() {
    return {
      listData: [],
      enumTitle: {'init':'初始化了','run':'启动了','stop':'停止了','fault':'故障了','down':'下线了'},
      classOption: {
          step: 0.4
        }
    }
  },
  methods: {
    async getEquipDynamicData() {
      const {code,data} = await getEquipDynamic();
      if(code !== 0) return
      const dataList = lodash.get(data,'list',[])
      if(dataList.length>0){
        this.listData = dataList.map(item=>{
          return {
            date: lodash.get(item,'createdAt',''),
            onwer: lodash.get(item,'customerId',''),
            code: lodash.get(item,'equipNum',''),
            msg: this.enumTitle[lodash.get(item,'evType','')]
          }
        })
      }
    }
  },
  mounted() {
    this.getEquipDynamicData();
    // setInterval(() => {
    //   this.generateRandomData();
    // }, 5000);
  }
}
</script>
<style lang="less" scoped>
.warp {
  height: 100%;
  width: 100%;
  margin: 0 auto;
  margin-bottom: 20px;
  overflow: hidden;

  ul {
    list-style: none;
    padding: 0;
    margin: 0 auto;

    li {
      display: block;
      height: 45px;
      line-height: 45px;
      margin-top: 10px;
      display: flex;
      justify-content: space-between;
      font-size: 15px;
    }
  }
}

.liItem {
  border: 1px solid rgba(25, 186, 139, .17);
  width: 100%;
  padding-left: 20px;
  color: #8489a4;
  font-size: 17px;
}

.gapStyle {
  margin-left: 5px;
}</style>